<template>
  <!-- 右下角固定分享按钮 -->
  <div class="share-btn flex-align-center" @click="sharePage">
    <img src="../assets/images/icon-share.png" />
  </div>
</template>

<script>
  export default {
    props: {},
    data() {
      return {};
    },
    watch: {},
    mounted() {},
    methods: {
      sharePage() {
        this.$Toast('点击右上角分享吧');
      },
    },
  };
</script>

<style lang="less" scoped>
  .share-btn {
    position: fixed;
    right: 4rem;
    bottom: 10rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 50%;
      height: 50%;
    }
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      position: absolute;
      border-radius: 50%;
      margin-left: -0.2rem;
      background-color: rgba(#000000, 0.3);
      backdrop-filter: saturate(200%) blur(30px);
    }
  }
</style>
